<template>
	<div id="WechatDiv">
		<p>购物车</p>
		<div class="warp" v-if="isShow">
			<div class="gou"></div>
			<p>购物小车有点空</p>
			<div><router-link to="/wechat">去逛逛</router-link></div>
		</div>
		<div class="warp1" v-else="isShow">
			<div class="dizhi">
				<div class="dizhi_div">
					<span class="mui-icon mui-icon-location"></span>
					<div class="dizhi_div_div" v-for="(i,index) in dd">
						<p class="p1">
							<span>{{i.name}}</span><span>{{i.tel}}</span>
						</p>
						<p class="p2">
							<span>送至:</span><span>{{i.addres}}</span>
						</p>
						
					</div>
				</div>
				<router-link to="/dizgl"><span @click="hide" class="mui-icon mui-icon-arrowright"></span></router-link>
			</div>
			
			<div class="good">
				<ul class="good_ul">
					<li v-for="(i,index) in arr">
						<div>
							<img :src="i.img">
						</div>
						<div>
							<p>{{i.name}}</p>
							<p>$<span class="dodo">{{i.price*i.num}} </span></p>
						</div>
						<p class="p3">
							<span class="mui-icon mui-icon-minus" @click="jian(index)"></span>
							<span class="num">{{i.num}}</span>
							<span class="mui-icon mui-icon-plus" @click="add(index)"></span>
						</p>
					</li>
				</ul>
				<!--送达时间-->
				<div class="sendtime">
					<p>送达时间：</p>
					<p>次日达<span class="mui-icon mui-icon-arrowright"></span></p>
				</div>
				<!--配送方式-->
				<div class="peisong">
					<p>配送方式：</p>
					<div class="ways">
						<p>商家自送</p>
						<p>免运费</p>
					</div>
				</div>
				<!--备注-->
				<p class="beizhu">
					<span>备注：</span><input type="text" name="" id="" value="" placeholder="选填，可填写订单的相关要求"/>
				</p>
			</div>
			<div class="jiesuan">
				<p class="">
					总价  <span>$</span><span id="zj">{{zongjia}}</span>
				</p>
				<p class="">
					<router-link to="/gouwuche">去结算</router-link>
				</p>
			</div>
		</div>
	</div>    
</template>

<script>
	export default {
	  name: 'Find',
	   beforeCreate:function(){
//			console.log(1)
//			this.arr = JSON.parse(localStorage.good);
//			console.log(this.arr)
	  },
	  data () {
	    return {
	      msg: '购物',
	      arr:[
//	      	{Imgsrc:"http://pic20.taocz.cn/store_83/goods/20161218/middle_201612181608335283.jpg",price:"39",name:"我也不知道",num:"1"}
	      ],
	      czAll:[],
	      dd:[],
	      zongjia:0,
	      i:"2",
	      isShow:true
	    }
	  },
	  
	  methods:{
	  	fun:function(){
//	  		console.log(this.arr[1].Imgsrc)
	  	},
	  
	  	hide:function(){
	  		$("#list").hide();
	  	},
	  	jian:function(index){	
	  		if(this.arr[index].num<=1){
	  			alert("是否删除");
	  			this.arr.splice(index,1);
	  			this.zongjia=0;
	  			if(this.arr.length ==0){
					this.isShow = true;
				}else{
					this.isShow = false;
				};
	  			for(var a = 0;a < this.arr.length;a++){
					this.zongjia = this.zongjia + this.arr[a].price*this.arr[a].num;
				};
	  		}else{
	  			this.arr[index].num--;
	  			this.zongjia=0;
	  			for(var a = 0;a < this.arr.length;a++){
				this.zongjia = this.zongjia + this.arr[a].price*this.arr[a].num;
				}
	  		}
	  	},
	  	add:function(index){
	  		this.arr[index].num++;
	  		this.zongjia=0;
	  		for(var a = 0;a < this.arr.length;a++){
				this.zongjia = this.zongjia + this.arr[a].price*this.arr[a].num;
			}
	  	}
//	  	jisuan: function(){
//	  		this.arr.forEach(function(i){
//			this.zongjia += i.price;
//			console.log(this.zongjia)
//			});
//	  	}
	  },
	 
	  created:function(){
		
		this.dd[0] = JSON.parse(localStorage.bb);
		
		this.arr = JSON.parse(localStorage.good);
		console.log(this.arr);
		var ccc = this;
		
		for(var a = 0;a < this.arr.length;a++){
			this.zongjia = this.zongjia + this.arr[a].price*this.arr[a].num;
		}

		if(this.arr.length ==0){
			this.isShow = true;
		}else{
			this.isShow = false;
		}
	  },
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	*{
		margin: 0;padding: 0;
	}
	html,body{
		background: white;width: 100%;height: 100%;
	}
	#WechatDiv{
		width: 100%;height: 100%;margin: 0 auto;
		background: white;
		
	}
	#WechatDiv>p{
		text-align: center;color: white;font-size: 1.8rem;width: 100%;
		height: 5rem;background: red;line-height: 5rem;position: fixed;top: 0;
	}
	/*warp*/
	.warp{
		width: 100%;height: 100%;background: white;padding-bottom: 20rem;
		/*border:1px solid blue;*/padding-top: 13rem;
		
	}
	.gou{
		width: 200px;height: 200px;
		margin: 0 auto;
		background: url("../assets/0070.jpg");background-size: 100% 100%;
	}
	.warp>p{
		color: #555;font-size: 1.4rem;margin-top: 1rem;text-align: center;z-index: 200;
	}
	.warp div:nth-child(3){
		width: 40%;margin-left: 30%;height: 5rem;padding: 1rem;border-radius: 0.3rem;border:1px solid red;margin-top: 2rem;text-align: center;
	}
	.warp>div>a{
		color: red;line-height: 3rem;display: block;width: 100%;height: 3rem;font-size: 1.6rem
	}
	/*warp1*/
	.warp1{
		width: 100%;background: #EEEEEE;margin-top: 5rem;
	}
	.dizhi{
		width: 100%;height: 7rem;background: #EEEEEE;border-bottom: 1px dashed red;
		display: flex;justify-content: space-between;align-items: center;
	}
	.dizhi_div{
		margin-left: 1rem;display: flex;align-items: center;
	}
	.dizhi_div>.mui-icon{
		color: red;
	}
	.p1{
		color: black;font-size: 1.6rem;
	}
	.p1 span{
		margin-left: 1.5rem;
	}
	.p2{
		color: #666;font-size: 1.4rem;
	}
	.p2 span{
		margin-left: 1.5rem;
	}
	.dizhi>a{
		font-size: 1.8rem;color: #555;margin-right: 1rem;
	}
	/*good*/
	.good{
		width: 100%;background: white;margin-top: 3rem;
	}
	.good_ul{
		width: 100%;
	}
	.good_ul li{
		width:100%;height: 10rem;display: flex;justify-content: flex-start;align-items: center;
		border-bottom: 1px solid #999999;position: relative;
	}
	.good_ul li div:nth-child(1){
		width: 7rem;height: 7rem;margin-left: 1rem;
	}
	.good_ul li div:nth-child(1) img{
		width: 7rem;height: 7rem;
	}
	.good_ul li div:nth-child(2){
		margin-left: 1.5rem;height: 7rem;
	}
	.good_ul li div:nth-child(2) p:nth-child(1){
		font-size: 1.6rem;color: black;
	}
	.good_ul li div:nth-child(2) p:nth-child(2){
		font-size: 1.6rem;color: orange;margin-top: 3rem;
	}
	.p3{
		position: absolute;right: 2rem;bottom: 1rem;
	}
	.p3 .mui-icon-plus{
		
	}
	.sendtime{
		width: 100%;height: 4rem;display: flex;justify-content: space-between;align-items: center;
		border-bottom: 1px solid #222222;
	}
	.sendtime p{
		font-size: 1.8rem;color: black;
	}
	.sendtime p span{
		color: #ACACB4;
	}
	.sendtime p:nth-child(1){
		margin-left: 1rem;
	}
	.sendtime p:nth-child(2){
		margin-right: 1rem;
	}
	.peisong{
		width: 100%;height: 6rem;display: flex;justify-content: space-between;align-items: center;
		border-bottom: 1px solid #222222;
	}
	.peisong>p:nth-child(1){
		margin-left: 1rem;font-size: 1.8rem;color: black;
	}
	.ways{
		margin-right: 1rem;
	}
	.ways p:nth-child(1){
		font-size: 1.8rem;color: black;line-height: 2rem;
	}
	.ways p:nth-child(2){
		font-size: 1.6rem;color: orange;line-height: 2rem;
	}
	.beizhu{
		width: 100%;height: 4rem;display: flex;justify-content: space-between;align-items: center;
		border-bottom: 1px solid #222222;
	}
	.beizhu span{
		width:20%;margin-left: 1rem;font-size: 1.8rem;color: black;
	}
	.beizhu input{
		height: 3rem;margin-top: 1.5rem;margin-right: 1rem;border: 0;font-size: 1.4rem;
	}
	
	/*jiesuan*/
	.jiesuan{
		width: 100%;height: 5rem;display: flex;position: fixed;left: 0;
		bottom: 4rem;
	}
	.jiesuan p:nth-child(1){
		width: 60%;height: 5rem;font-size: 1.6rem;color: black;padding-left: 2rem;line-height: 5rem;
		background: lightblue;
	}
	.jiesuan p:nth-child(1) span{
		color: orange;
	}
	.jiesuan p:nth-child(2){
		width: 40%;height: 5rem;font-size: 1.6rem;color: black;padding-left: 2rem;line-height: 5rem;
		text-align: center;background: red;
	}
	.jiesuan p:nth-child(2) a{
		font-size: 1.8rem;color: white;
	}
</style>

